import { Component } from 'react'
import Taro from '@tarojs/taro'
import { Image, Button, View, ScrollView, Input } from '@tarojs/components'
import { connect } from 'react-redux'
import { LoadStudentActionAsync,DeleteStudentActionAsync,AddStudentActionAsync} from '../../redux/action/studentAction';
import { ChangeLoadingAction } from '../../redux/action/loadingAction';
import Loading from '../../components/Loading/index'
import dev from '../../../config/dev';
import './index.less'
import http from '../../service/http';

const isH5 = process.env.TARO_ENV === 'h5'

@connect(	state => ({
    studentList:state.studentList
	}),
	{LoadStudentActionAsync,DeleteStudentActionAsync,AddStudentActionAsync,ChangeLoadingAction}
)
class Index extends Component {
  state={
    list:[1,2,3,4,5,6,7,8],
    chooseIndex:-1,
    flag:false,
    tableName:'',
    tableNumId:0
  }

  // UNSAFE_componentWillMount () { console.log('UNSAFE_componentWillMount,组件还没挂载前');if(isH5){console.log('你当前环境为H5')} }

  // componentDidMount () { console.log('componentDidMount,组件挂载后');}

  // shouldComponentUpdate (nextProps,nextState) { console.log('shouldComponentUpdate,组件是否需要更新',nextProps,nextState);return true }

  // componentWillUnmount () { console.log('componentWillUnmount,组件卸载前') }

  // componentDidShow () { console.log('componentDidShow,组件显示后') }

  // componentDidHide () { console.log('componentDidHide,组件隐藏后') }

    // onLoad
  async onLoad (options) {
    Taro.login({
      success:(res)=>{
        http.getOpenId({code:res.code}).then((res0)=>{
          let data=JSON.parse(res0.data)
          Taro.setStorage({
            key:"openId",
            data:data.openid
          })
        })
      }
    })
    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    // let scene=decodeURIComponent(options.scene)
    // if(scene==undefined){scene=1}
    let {data}=await http.getTable({id:1})
    this.setState({tableName:data.name,tableNumId:data.id})
  }

  // onReady
  onReady () {}

  // 对应 onShow
  componentDidShow () {}

  // 对应 onHide
  componentDidHide () {}

  // 对应 onPullDownRefresh，除了 componentDidShow/componentDidHide 之外，
  // 所有页面生命周期函数名都与小程序相对应
  onPullDownRefresh () {}

  getQrCode(){
    Taro.showLoading({
      title:'生成中...'
    })
    let that=this
    Taro.cloud.callFunction({
      // name:'createQRCode',
      // name:'wxacode',
      name:'getUnlimited',
      data:{
        "page": 'pages/index/index',
        "scene": 'a=1',
        "checkPath": true,
        "envVersion": 'release'
      },
      success(res){
        console.log(res)
        let fileManager=Taro.getFileSystemManager();
        let filePath = Taro.env.USER_DATA_PATH+'/qr.jpg'
        fileManager.writeFile({
          filePath:filePath,
          encoding:'binary',
          data:res.result.buffer,
          success(res){
            console.log(filePath)
            that.setState({src:filePath})
            Taro.hideLoading({})
          }
        })
      },
    })
  }
  render () {
    return (
      <View style={{height:'100vh',padding:'0 40rpx'}}>
        <View style={{display:'flex',
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
        position:'relative'
      }}
        >
          <View style={{marginTop:'300rpx',fontSize:'35rpx',color:'#fff'}}>欢迎来到</View>
          <View style={{marginTop:'20rpx',fontSize:'40rpx',color:'#fff'}}>南客餐饮店</View>
        </View>
        <View style={{padding:'20rpx',height:'550rpx',width:'670rpx',backgroundColor:'#fff',borderRadius:'15rpx',position:'absolute',left:'40rpx',bottom:'100rpx'}}>
          <View style={{fontWeight:'800',fontSize:'35rpx'}}>你好，请选择就餐人数</View>
          <View style={{fontSize:'30rpx',marginTop:'20rpx'}}>桌号：{this.state.tableName}<View style={{float:'right',color:'blue'}}
            onClick={()=>{
              Taro.navigateTo({
                url: '/pages/orderList/index'
              })
            }}
          >以往订单</View></View>
          <View style={{margin:'100rpx 0',whiteSpace:'nowrap'}}>
            <ScrollView scrollX>
              {
                this.state.list.map((item,index)=>{
                  return <Button className={this.state.chooseIndex!==item?'inline-block-button':'inline-block-button-choose'} key={item}
                    onClick={()=>{this.setState({chooseIndex:item})}}
                  >{item}</Button>
                })
              }
              {this.state.flag?<Input style={{paddingLeft:'20rpx',borderRadius:'10rpx',border:'1rpx #dadada solid'}} className='inline-block-button' placeholder='请输入' type='number' onInput={(e)=>{
                this.setState({chooseIndex:parseInt(e.detail.value)})
              }}
              ></Input>:<Button className='inline-block-button'
                onClick={()=>{this.setState({flag:true})}}
              >自定义</Button>}
            </ScrollView>
          </View>
          <Button style={{backgroundColor:'#0078d7',color:'#fff'}}
            onClick={()=>{
              if(this.state.chooseIndex!==-1){
                // Taro.showToast({
                //   title:'欢迎进入',
                //   icon:'success',
                //   success:(res){
                    
                //   }
                // })
                Taro.navigateTo({url:'/pages/verticalnav/index?num='+this.state.chooseIndex+'&tableName='+this.state.tableName+'&tableNumId='+this.state.tableNumId})
              }else{
                Taro.showToast({
                  title:'请选择就餐人数',
                  icon:'none'
                })
              }
            }}
          >开始点餐</Button>
        </View>
        <Image
          style={{width:'100vw',height:'100vh',position:'absolute',top:'0',left:'0',zIndex:'-1'}}
          src={dev.baseUrl+'/files/bgindex.jpg'} 
        />
        <View style={{opacity:'0.4',background:'#000',width:'100vw',height:'100vh',position:'absolute',top:'0',left:'0',zIndex:'-1'}}></View>
        <Loading></Loading>
      </View>
    )
  }
}
Index.defaultProps = {}
export default Index

